<template>
<div>
<div class="header">
<div class="header-left">
    <span class="iconfont icon-fanhui"></span>
</div>
<div class="header-input">输入城市景点游玩主题</div>
<div class="header-right"><router-link :to="{path:'/city'}">{{this.$store.state.city}}</router-link></div>
</div>
</div>
</template>
<script>
export default {
  name: 'HomeHeader'
}
// 1rem = html font-size = 50px
// 另外设计图如果是两倍放大图，我们的像素都要除以2
// 如果是两倍图，把font-size设置为50px，这时用rem正好是设计图大小的0.01倍
// flex:1可以让块自动撑开
</script>
<style lang="stylus" scoped>
.header
  display: flex
  line-height: .86rem
  background: #00bcd4
  color: #fff
  .header-left
    width: .64rem
    float: left
    text-align: center
  .header-input
    flex: 1
    margin-top: 0.1rem
    height: 0.66rem
    line-height: 0.66rem
    margin-left: 0.2rem
    background: #ffffff
    border-radius: 0.1rem
    color: #ccc
    text-indent: .2rem
  .header-input:before
    font-family: "iconfont" !important
    content: "\e632"
  .header-right
    width: 1.24rem
    float: right
    text-align: center
  .header-right a
    color:#fff
  .header-right:after
    font-family: "iconfont" !important
    content: "\e615"
    font-size: 5px;
    padding-left: 2px;

</style>
